<project-header class="top-header"></project-header>
<project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">Loading...</div>
          <div class="deployment" ng-if="deployment">
            <h1>
              {{deployment.metadata.name}}
              <small class="meta">created <relative-timestamp timestamp="deployment.metadata.creationTimestamp"></relative-timestamp></small>
              <div class="pull-right dropdown" ng-hide="!('replicationControllers' | canIDoAny)">
                <button type="button" class="dropdown-toggle actions-dropdown-btn btn btn-default hidden-xs" data-toggle="dropdown">
                  Actions
                  <span class="caret"></span>
                </button>
                <a href=""
                   class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
                   data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                <ul class="dropdown-menu actions action-button">
                  <li ng-if="'replicationcontrollers' | canI : 'update'">
                    <a ng-href="project/{{project.metadata.name}}/attach-pvc?deployment={{deployment.metadata.name}}"
                       role="botton">Attach Storage</a>
                  </li>
                  <li ng-if="'replicationcontrollers' | canI : 'update'">
                    <a ng-href="project/{{projectName}}/set-limits?rcName={{deployment.metadata.name}}"
                       role="button">Set Resource Limits</a>
                  </li>
                  <li ng-if="!autoscalers.length && ({resource: 'horizontalpodautoscalers', group: 'extensions'} | canI : 'create')">
                    <!-- Create a new HPA. -->
                    <a ng-href="project/{{projectName}}/edit/autoscaler?kind=ReplicationController&name={{deployment.metadata.name}}"
                      role="button">Add Autoscaler</a>
                  </li>
                  <li ng-if="autoscalers.length === 1 && ({resource: 'horizontalpodautoscalers', group: 'extensions'} | canI : 'update')">
                    <!-- Edit an existing HPA. -->
                    <a ng-href="project/{{projectName}}/edit/autoscaler?kind=HorizontalPodAutoscaler&group=extensions&name={{autoscalers[0].metadata.name}}"
                      role="button">Edit Autoscaler</a>
                  </li>
                  <li ng-if="'replicationcontrollers' | canI : 'update'">
                    <a ng-href="project/{{projectName}}/edit/health-checks?name={{deployment.metadata.name}}&kind=ReplicationController"
                       role="button">Edit Health Checks</a>
                  </li>
                  <li ng-if="'replicationcontrollers' | canI : 'update'">
                    <edit-link
                      resource="deployment"
                      kind="ReplicationController"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li ng-if="'replicationcontrollers' | canI : 'delete'">
                    <delete-link
                      kind="ReplicationController"
                      resource-name="{{deployment.metadata.name}}"
                      project-name="{{deployment.metadata.namespace}}"
                      alerts="alerts"
                      rc-replicas="deployment.status.replicas"
                      hpa-list="hpaForRC">
                    </delete-link>
                  </li>
                </ul>
              </div>
            </h1>
            <labels labels="deployment.metadata.labels" clickable="true" kind="deployments" project-name="{{deployment.metadata.namespace}}" limit="3"></labels>
          </div><!-- /deployment -->          
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content">
        <div class="container-fluid">
          <div class="row" ng-if="deployment" >
            <div class="col-md-12">
              <uib-tabset>
                <uib-tab active="selectedTab.details">
                  <uib-tab-heading>Details</uib-tab-heading>
                  <div class="resource-details">
                    <ng-include src=" 'views/browse/_deployment-details.html' "></ng-include>
                  </div>
                </uib-tab>
                <uib-tab ng-if="metricsAvailable" heading="Metrics" active="selectedTab.metrics">
                  <!-- Use ng-if to remove the metrics directive when the tab is not active so
                       we don't update in the background. -->
                  <deployment-metrics
                      ng-if="selectedTab.metrics && podsForDeployment"
                      pods="podsForDeployment" containers="deployment.spec.template.spec.containers">
                  </deployment-metrics>
                </uib-tab>
                <uib-tab active="selectedTab.events" ng-if="'events' | canI : 'watch'">
                  <uib-tab-heading>Events</uib-tab-heading>
                  <events resource-kind="ReplicationController" resource-name="{{deployment.metadata.name}}" project-context="projectContext" ng-if="selectedTab.events"></events>
                </uib-tab>
              </uib-tabset>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
</project-page>
